CSS-in-JS এবং Styled Components ইন্টিগ্রেশন

Next.js একটি React ফ্রেমওয়ার্ক, যা CSS-in-JS সমর্থন করে এবং এর মাধ্যমে স্টাইল শিটগুলিকে JavaScript কোডের মধ্যে অন্তর্ভুক্ত করা যায়। এটি স্টাইলিংয়ের জন্য একাধিক পদ্ধতি সাপোর্ট করে, এবং এর মধ্যে Styled Components অন্যতম জনপ্রিয় পদ্ধতি। Styled Components এর মাধ্যমে আপনি কম্পোনেন্ট-বেসড স্টাইলিং করতে পারেন, যা সহজেই মেইন্টেইন করা যায় এবং React কম্পোনেন্টের সঙ্গে ইন্টিগ্রেট করা যায়।

এই টিউটোরিয়ালে আমরা দেখব কীভাবে Next.js এর সাথে Styled Components ইন্টিগ্রেট করতে হয় এবং এর মাধ্যমে কিভাবে CSS-in-JS ব্যবহার করা যায়।

১. Styled Components কী?

Styled Components হল একটি CSS-in-JS লাইব্রেরি, যা আপনাকে JavaScript এ সিএসএস স্টাইল ডিফাইন করতে এবং সেই স্টাইলগুলোকে React কম্পোনেন্টের সাথে জড়িত করে রাখতে সাহায্য করে। এটি template literals ব্যবহার করে স্টাইল তৈরি করার সুবিধা দেয়, এবং স্টাইলগুলি স্বয়ংক্রিয়ভাবে সঠিকভাবে লোড ও স্কোপ করা হয়।

২. Styled Components ইন্সটলেশন

Next.js এ Styled Components ব্যবহার করার জন্য প্রথমে আপনাকে এই লাইব্রেরিটি ইন্সটল করতে হবে। নিচে এর ইন্সটলেশন প্রক্রিয়া দেওয়া হলো:

npm install styled-components
npm install --save-dev babel-plugin-styled-components

এখানে:

• styled-components হল মূল লাইব্রেরি।
• babel-plugin-styled-components হল একটি Babel প্লাগইন, যা স্টাইল কম্পাইলিং এবং ডেভেলপমেন্ট মোডে উন্নত ফিচার সরবরাহ করে।

৩. Next.js এ Styled Components কনফিগারেশন

Next.js এ Styled Components ব্যবহারের জন্য আপনাকে কিছু কনফিগারেশন করতে হবে, বিশেষত Babel সেটিংসের মাধ্যমে। এটি babel-plugin-styled-components প্লাগইনটি ব্যবহারের জন্য দরকারি।

babel.config.js ফাইল তৈরি করা:

আপনি যদি ইতোমধ্যে একটি babel.config.js ফাইল না রাখেন, তাহলে এই ফাইলটি তৈরি করে নিচের কনফিগারেশন ব্যবহার করতে পারেন।

// babel.config.js
module.exports = {
  presets: ['next/babel'],
  plugins: [['styled-components', { ssr: true }]],
};

এটি SSR (Server-Side Rendering) এর জন্য স্টাইল শিটগুলির সঠিকভাবে রেন্ডার নিশ্চিত করে। এতে Styled Components এর ক্লায়েন্ট-সাইড রেন্ডারিং এবং সার্ভার-সাইড রেন্ডারিং উভয়ই সমর্থিত হয়।

৪. Styled Components ব্যবহার করে স্টাইলিং

এখন, আপনি Styled Components ব্যবহার করে আপনার Next.js অ্যাপে স্টাইলিং করতে পারেন।

উদাহরণ: Styled Components ব্যবহার করে একটি কম্পোনেন্ট তৈরি করা

// components/Button.js
import styled from 'styled-components';

const Button = styled.button`
  background-color: ${(props) => (props.primary ? 'blue' : 'gray')};
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;

  &:hover {
    background-color: ${(props) => (props.primary ? 'darkblue' : 'darkgray')};
  }
`;

export default Button;

এখানে, আমরা একটি Button কম্পোনেন্ট তৈরি করেছি, যা primary প্রপার্টি অনুসারে স্টাইল পাবে।

pages/index.js এ Button কম্পোনেন্ট ব্যবহার করা:

// pages/index.js
import React from 'react';
import Button from '../components/Button';

const Home = () => {
  return (
    <div>
      <h1>Welcome to My Next.js App with Styled Components</h1>
      <Button primary>Primary Button</Button>
      <Button>Secondary Button</Button>
    </div>
  );
};

export default Home;

এখানে, আমরা Button কম্পোনেন্টটি ব্যবহার করেছি এবং তার মধ্যে primary প্রপার্টি পাঠিয়েছি। এর ফলে প্রথম বাটনটি নীল রঙের হবে, এবং দ্বিতীয়টি ধূসর রঙের হবে।

৫. Styled Components এ গ্লোবাল স্টাইলিং (Global Styling)

Next.js এ Styled Components এর মাধ্যমে আপনি গ্লোবাল স্টাইলিংও করতে পারেন, যাতে আপনি পুরো অ্যাপের জন্য কিছু সাধারণ স্টাইল প্রদান করতে পারেন। এর জন্য আপনি createGlobalStyle ফাংশন ব্যবহার করবেন।

উদাহরণ: গ্লোবাল স্টাইল তৈরি করা

// styles/global.js
import { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle`
  body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f5f5f5;
  }
`;

export default GlobalStyle;

এখন, _app.js ফাইলে গ্লোবাল স্টাইলটি যুক্ত করতে হবে:

// pages/_app.js
import React from 'react';
import GlobalStyle from '../styles/global';

const MyApp = ({ Component, pageProps }) => {
  return (
    <>
      <GlobalStyle />
      <Component {...pageProps} />
    </>
  );
};

export default MyApp;

এখানে, GlobalStyle কম্পোনেন্টটি গ্লোবাল স্টাইলিং অ্যাপ্লাই করবে এবং প্রতিটি পেজের জন্য একযোগে ব্যবহৃত হবে।

৬. Styled Components এর সুবিধা:

1. Scoped Styling: Styled Components দ্বারা আপনার CSS শুধুমাত্র সংশ্লিষ্ট কম্পোনেন্টের জন্য অ্যাপ্লাই হয়, যা গ্লোবাল CSS কনফ্লিক্ট এড়ায়।
2. Dynamic Styling: props এর মাধ্যমে স্টাইল ডাইনামিকভাবে পরিবর্তন করা যায়।
3. Server-Side Rendering (SSR): Styled Components Next.js এর SSR এর সাথে কাজ করে এবং ক্লায়েন্ট সাইডে ফ্ল্যাশ অফ স্টাইলিং এড়ায়।
4. Developer Experience: Styled Components এর মাধ্যমে CSS এর সব সুবিধা পাওয়ার পাশাপাশি কোডের পাঠযোগ্যতা এবং রিইউজেবিলিটি বৃদ্ধি পায়।

সারাংশ

Next.js এবং Styled Components ইন্টিগ্রেশন খুবই সহজ এবং শক্তিশালী। এটি আপনাকে React কম্পোনেন্ট ভিত্তিক স্টাইলিং প্রদান করে, যা আপনার অ্যাপ্লিকেশনকে মডুলার, রিইউজেবল এবং maintainable করে তোলে। Styled Components ব্যবহার করে আপনি গ্লোবাল স্টাইলিং, ডাইনামিক স্টাইলিং এবং ক্লায়েন্ট-সাইড রেন্ডারিং সহজে করতে পারেন।